<template>
    <base-breadcrumb class="fixed-container" :title="$route.meta.title">
      <a-card>
          <title-name title="党员信息"></title-name>
          <a-form-model class="flex-model-form"
            ref="addForm"
            :model="detail"
            :rules="rules"
          >
            <a-col :span="8" v-for="(item, index) in formDatas" :key="item.key">
              <template v-if="item.key == 'typeName'">
                <a-form-model-item label="当前党员类型" prop="type">
                  <a-select allowClear
                    v-model="detail.type"
                  >
                    <a-select-option key="1" :value="1">
                        正式党员
                    </a-select-option>
                    <a-select-option key="2" :value="2">
                        预备党员
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </template>
              <template v-else-if="item.key == 'proPartyTime'">
                <a-form-model-item label="确定预备党员时间" prop="proPartyTime">
                  <a-date-picker
                    placeholder="请选择确定预备党员时间"
                    format="YYYY-MM-DD"
                    valueFormat="YYYY-MM-DD"
                    v-model="detail.proPartyTime"
                    allow-clear 
                   />
                </a-form-model-item>
              </template>
              <template v-else-if="item.key == 'positiveTime'">
                  <a-form-model-item v-if="detail.type==1" key="required" label="预备转正时间" prop="positiveTime">
                    <a-date-picker
                      placeholder="请选择预备转正时间"
                      format="YYYY-MM-DD"
                      valueFormat="YYYY-MM-DD"
                      v-model="detail.positiveTime"
                      allow-clear 
                     />
                  </a-form-model-item>
                  <a-form-model-item v-else key="notrequired" label="预备转正时间">
                    <a-date-picker
                      placeholder="请选择预备转正时间"
                      format="YYYY-MM-DD"
                      valueFormat="YYYY-MM-DD"
                      v-model="detail.positiveTime"
                      allow-clear 
                     />
                  </a-form-model-item>
              </template>
              
              <template v-else>
                <a-form-model-item :label="item.name">
                  <BaseInput :value="formatValue(item)" disabled></BaseInput>
                </a-form-model-item>
              </template>
            </a-col>
          </a-form-model>
      </a-card>
      <a-card>
          <title-name title="党费收缴信息"></title-name>
          
          <template>
            <a-button class="mb12" type="primary" @click="showDuesModal('add')">
              新增党费收缴记录
            </a-button>
            <a-button class="mb12" :disabled="duesSelectedRowKeys.length==0" style="margin-left: 20px;" @click="delDues">
              删除
            </a-button>
            <excel ref="exportDuesBtn" fileName="党费收缴记录" is-click-generate="false">
              <a-button class="mb12 ml12" slot="excelBtn" :loading="duesExport" @click="handleDuesExportExport"
                >导出</a-button
              >
            </excel>
          </template>
          
          <s-table
              ref="DuesTable"
              tableLayout="fixed"
              size="default"
              rowKey="id"
              :columns="DuesColumns"
              :data="DuestLoadData"
              :alert="true"
              show-size-changer
              show-quick-jumper
              showPagination="auto"
              :row-selection="{ selectedRowKeys: duesSelectedRowKeys, onChange: onDuesSelectChange }"
          >
            <template slot="action" slot-scope="text, record">
              <a @click="showDuesModal('edit', record.id)">编辑</a>
            </template>
          </s-table>
      </a-card>
      <a-card>
          <title-name title="党员发展信息"></title-name>
          
          <template>
            <a-button class="mb12" type="primary" @click="showDevelopmentModal('add')">
              新增党员发展记录
            </a-button>
            <a-button class="mb12" :disabled="developmentSelectedRowKeys.length==0" style="margin-left: 20px;" @click="delDevelopment">
              删除
            </a-button>
            <excel ref="exportDevelopmentBtn" fileName="党员发展信息" is-click-generate="false">
              <a-button class="mb12 ml12" slot="excelBtn" :loading="developmentExport" @click="handleDevelopmentExportExport"
                >导出</a-button
              >
            </excel>
          </template>
          
          <s-table
              ref="DevelopmentTable"
              tableLayout="fixed"
              size="default"
              rowKey="id"
              :columns="DevelopmentColumns"
              :data="DevelopmentLoadData"
              :alert="true"
              show-size-changer
              show-quick-jumper
              showPagination="auto"
              :row-selection="{ selectedRowKeys: developmentSelectedRowKeys, onChange: onDevelopmentSelectChange }"
          >
            <template slot="fileList" slot-scope="text, record">
              <span v-for="(item, index) in text">
                <span v-if="index > 0">,</span>
                <a :href="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + item.fileId"
                  target="_parent"
                >{{ item.fileName + item.suffixName }}</a>
              </span>
            </template>
            <template slot="action" slot-scope="text, record">
              <a @click="showDevelopmentModal('edit', record.id)">编辑</a>
            </template>
          </s-table>
      </a-card>
      <div class="btn_box tool-btns--fixed page-btn-right-top">
        <a-button class="ml12" @click="handleClose">关闭</a-button>
        <a-button class="ml12" key="submit" type="primary" :loading="btnloading" @click="submitForm">
          提交
        </a-button>
      </div>
      
      <AddDues
        :visible.sync="duesModal.visible"
        :modalType="duesModal.type"
        :curId="duesModal.curId"
        @submitSuccess="refreshDuesTable"
      ></AddDues>
      
      <AddDevelopment
        :visible.sync="developmentModal.visible"
        :modalType="developmentModal.type"
        :curId="developmentModal.curId"
        @submitSuccess="refreshDevelopmentTable"
      ></AddDevelopment>
    </base-breadcrumb>
</template>

<script>
import Vue from 'vue'
import BaseInput from '@/components/BaseInput'
import { STable } from '@/components' // 表格
import AddDues from './addDues.vue';
import AddDevelopment from './addDevelopment.vue';
import { getPartyMemberById, updatePartyMember, getPagePartyMemberDevelopment, getPagePartyMemberDues, deleteDevelopment, deleteMemberDues } from '@/api/partyMasses'
const DuesColumns = [
  {
      title: '序号',
      width: 80,
      dataIndex: 'index',
      customRender() {
          return arguments[2] + 1
      },
  },
  {
      title: '党费缴纳基数',
      ellipsis: true,
      dataIndex: 'payBase',
  },
  {
      title: '党费缴纳额度（元）',
      ellipsis: true,
      dataIndex: 'payLimit',
  },
  {
      title: '党费缴纳截止月份',
      ellipsis: true,
      dataIndex: 'deadline',
  },
  {
      title: '具体起始时间',
      ellipsis: true,
      dataIndex: 'startTime',
  },
  {
      title: '具体截止时间',
      ellipsis: true,
      dataIndex: 'endTime',
  },
  {
      title: '记录人',
      dataIndex: 'creatorName',
      ellipsis: true,
  },
  {
      title: '记录时间',
      dataIndex: 'createTime',
      ellipsis: true,
  },
  {
      title: '操作',
      dataIndex: 'action',
      width: '100px',
      align: 'center',
      scopedSlots: { customRender: 'action' },
  }
]
const DevelopmentColumns = [
  {
      title: '序号',
      width: 80,
      dataIndex: 'index',
      customRender() {
          return arguments[2] + 1
      },
  },
  {
      title: '发展阶段',
      ellipsis: true,
      dataIndex: 'phaseName',
  },
  {
      title: '时间节点',
      ellipsis: true,
      dataIndex: 'node',
  },
  {
      title: '详细信息',
      ellipsis: true,
      dataIndex: 'detail',
  },
  {
      title: '证明材料',
      dataIndex: 'fileList',
      scopedSlots: { customRender: 'fileList' },
  },
  {
      title: '记录人',
      dataIndex: 'creatorName',
      ellipsis: true,
  },
  {
      title: '记录时间',
      dataIndex: 'createTime',
      ellipsis: true,
  },
  {
      title: '操作',
      dataIndex: 'action',
      width: '100px',
      align: 'center',
      scopedSlots: { customRender: 'action' },
  }
]
export default {
  name:'a'+ Date.now(),
    // name: 'AddPartyOrg',
    components: {
      BaseInput,
      STable,
      AddDues,
      AddDevelopment
    },
    computed: {
      token() {
        return Vue.getAcloudProvider().getAccessToken()
      }
    },
    mounted() {
      const param = {id: this.$route.query.id};
      getPartyMemberById(param).then((res) => {
        if (res && res.code == 0) {
          this.detail = res.data;
        }
        // this.detail.form = res.data;
      })
    },
    data() {
        return {
          DuesColumns,
          DevelopmentColumns,
          DuestLoadData: (parameter) => {
              const query = {
                partyMemberId: this.$route.query.id
              }
              const requestParameters = Object.assign({}, parameter, { query: query })
              if (this.editable) {
                requestParameters.needCount = false;
              }
              return getPagePartyMemberDues(requestParameters).then((res) => {
                const obj = {
                  data: res.data.list || [],
                  totalSize: res.data.total,
                  currentPage: res.data.pageNum
                }
                return obj
              });
          }, // 加载数据方法 必须为 Promise 对象
          DevelopmentLoadData: (parameter) => {
              const query = {
                partyMemberId: this.$route.query.id
              }
              const requestParameters = Object.assign({}, parameter, { query: query })
              return getPagePartyMemberDevelopment(requestParameters).then((res) => {
                const obj = {
                  data: res.data.list || [],
                  totalSize: res.data.total,
                  currentPage: res.data.pageNum
                }
                return obj
              });
          }, // 加载数据方法 必须为 Promise 对象
          btnloading: false,
          duesModal: {
            visible: false,
            type: 'add',
            curId: null
          },
          duesExport: false,
          developmentExport: false,
          duesSelectedRowKeys: [],
          developmentSelectedRowKeys: [],
          developmentModal: {
            visible: false,
            type: 'add',
            curId: null
          },
          formDatas: [
            {key: 'userName', name: '党员名称'},
            {key: 'typeName', name: '党员类型'},
            {key: 'proPartyTime', name: '确定预备党员时间'},
            {key: 'positiveTime', name: '预备转正时间'},
            {key: 'employeeNum', name: '员工编号'},
            {key: 'phone', name: '手机号码'},
            {key: 'currentPost', name: '当前岗位'},
            {key: 'idCard', name: '身份证号'},
            {key: 'sex', name: '性别'},
            {key: 'birthday', name: '出生日期'},
            {key: 'age', name: '年龄'},
            {key: 'education', name: '最高学历'},
            {key: 'email', name: '邮箱'},
            {key: 'partyOrgName', name: '当前所在党支部'},
            {key: 'partyPost', name: '党内职务'},
            {key: 'statusName', name: '状态'},
          ],
          detail: {
            // userName: '多少度多少度多少度多少度多少度多少度多少度',
            // type: 1,
            // proPartyTime: '2020-12-08'
          },
          rules: {
            type: [ { required: true, message: '请选择当前党员类型', trigger: 'change' } ],
            proPartyTime: [ { required: true, message: '请选择确定预备党员时间', trigger: 'change' } ],
            positiveTime: [ { required: true, message: '请选择预备转正时间', trigger: 'change' } ],
          }
        }
    },
    watch:{
      // 'detail.type': {
      //   handler(nv, old) {
      //     if (nv !== 1) {
      //     }
      //   }
      // }
    },
    methods: {
      showDuesModal(type, id) {
        this.duesModal.visible = true;
        this.duesModal.type = type;
        this.duesModal.curId = id ? id : null;
      },
      showDevelopmentModal(type, id) {
        this.developmentModal.visible = true;
        this.developmentModal.type = type;
        this.developmentModal.curId = id ? id : null;
      },
      
      refreshDuesTable() {
        this.$refs.DuesTable.refresh(true)
      },
      refreshDevelopmentTable() {
        this.$refs.DevelopmentTable.refresh(true)
      },
      onDuesSelectChange(selectedRowKeys) {
        this.duesSelectedRowKeys = selectedRowKeys;
      },
      onDevelopmentSelectChange(selectedRowKeys) {
        this.developmentSelectedRowKeys = selectedRowKeys;
      },
      delDues() {
        this.$confirm({
            title: '温馨提示',
            content: '请确定删除选中数据吗？',
            onOk: () => {
                return deleteMemberDues({id: this.duesSelectedRowKeys}).then((res) => {
                   if (res.code == 0) {
                     this.$message.success('删除成功！');
                     this.refreshDuesTable();
                   }
                }).catch(() => {})
            },
        })
      },
      delDevelopment() {
        this.$confirm({
            title: '温馨提示',
            content: '请确定删除选中数据吗？',
            onOk: () => {
                return deleteDevelopment({id: this.developmentSelectedRowKeys}).then((res) => {
                   if (res.code == 0) {
                     this.$message.success('删除成功！');
                     this.refreshDevelopmentTable();
                   }
                }).catch(() => {})
            },
        })
        
      },
      formatValue(item) {
        const value = this.detail[item.key];
        if (item.map) {
          return item.map[value]
        }
        return value
      },
      handleClose() {
        this.$multiTab.close(this.$route.fullpath);
      },
      submitForm() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            const param = {
              id: this.$route.query.id,
            }
            param.type = this.detail.type;
            param.positiveTime = this.detail.positiveTime;
            param.proPartyTime = this.detail.proPartyTime;
            this.btnloading = true;
            updatePartyMember(param).then((res) => {
              this.btnloading = false;
              if (res.code == 0) {
                this.$message.success('修改成功！');
                this.handleClose();
              }
            }).catch(() => {
              this.btnloading = false;
            })
          }
        })
      },
      handleDuesExportExport() {
        try {
          if (this.duesExport) return
          this.duesExport = true;
          const params = {
            needCount: false,
            query: {
              partyMemberId: this.$route.query.id
            }
          }
          getPagePartyMemberDues(params).then((res) => {
            this.duesExport = false
            if (res && res.code == 0) {
              const list = res.data.list;
              const columns = [...this.DuesColumns];
              columns.splice(columns.length - 1, 1)
              this.$refs.exportDuesBtn.generateExcel(list, { columns })
            }
          }).catch(() => {
            this.duesExport = false
          })
        } catch (e) {
          console.error(e)
          this.duesExport = false
        }
      },
      handleDevelopmentExportExport() {
        try {
          if (this.duesExport) return
          this.developmentExport = true;
          const params = {
            needCount: false,
            query: {
              partyMemberId: this.$route.query.id
            }
          }
          getPagePartyMemberDevelopment(params).then((res) => {
            this.developmentExport = false
            if (res && res.code == 0) {
              const list = (res.data.list || []).map((item) => {
                const fileList = item.fileList ? item.fileList.map((i) => {
                  return (i.fileName + i.suffixName)
                }) : []
                item.fileList = fileList.join(',');
                return item
              })
              const columns = [...this.DevelopmentColumns];
              columns.splice(columns.length - 1, 1);
              this.$refs.exportDevelopmentBtn.generateExcel(list, { columns })
            }
          }).catch(() => {
            this.developmentExport = false
          })
        } catch (e) {
          console.error(e)
          this.developmentExport = false
        }
      }
    }
}
</script>

<style lang="less" scoped>
  .ant-form-item{
    display: flex;
  }
</style>
